<template>
  <el-card shadow="hover">
    <data-table-app-view :containerSubtractHeight="66">
      <el-form slot="toolbar" inline :model="searchForm">
        <el-form-item label="工单编号">
          <el-input v-model="searchForm.orderno" clearable style="width: 210px"></el-input>
        </el-form-item>
        <el-form-item label="工单状态">
          <type-select
            v-model="searchForm.statuses"
            :items="statusItems"
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item label="支付状态">
          <type-select
            v-model="searchForm.payStatus"
            :items="DictMan.items('payStatus')"
            style="width: 90px"
          />
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="searchForm.createTimes"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            align="right"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            style="width: 320px"
          />
        </el-form-item>
        <el-form-item>
          <data-table-query-button :query-params="getQueryParams" />
        </el-form-item>
      </el-form>
      <data-table
        ref="table"
        url="/api/shop/employee/orders"
        lazy
      >
        <el-table-column prop="orderno" label="工单号" width="190"></el-table-column>
        <el-table-column prop="status" label="工单状态" width="100" v-slot="{row}">
          <status-tag :status="row.status" type="service" />
        </el-table-column>
        <el-table-column prop="payStatus" label="支付状态" width="90" v-slot="{row}">
          <pay-status-tag :status="row.payStatus" />
        </el-table-column>
        <el-table-column prop="providerName" label="商家店铺" width="240" show-overflow-tooltip></el-table-column>
        <el-table-column prop="industryText" label="行业" width="80"></el-table-column>
        <el-table-column prop="linkman" label="下单人" width="120"></el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="152"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              @click="onDetailsClick(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </data-table>
    </data-table-app-view>
  </el-card>
</template>

<script>
import StatusTag from '@/pages/shop/order/StatusTag';
import PayStatusTag from '@/pages/shop/order/PayStatusTag';

export default {
  components: {
    StatusTag,
    PayStatusTag
  },
  data() {
    return {
      searchForm: {
        employeeId: null,
        providerId: null
      },
      statusItems: StatusTag.serviceOrderStatusItems
    };
  },
  methods: {
    query(params) {
      this.searchForm.employeeId = params.id;
      this.searchForm.providerId = params.providerId;
      this.$refs.table.query(this.getQueryParams());
    },
    getQueryParams() {
      let queryParams = {...this.searchForm};
      queryParams = {
        ...queryParams,
        ...(queryParams.createTimes ? {
            startCreateTime: queryParams.createTimes[0],
            endCreateTime: queryParams.createTimes[1]
          } : {})
      };
      delete queryParams.createTimes;
      return queryParams;
    },
    onDetailsClick(order) {
      this.pushPage({
        path: '/shop/order/details',
        params: {
          order,
          type: 'service',
          onDeleteSuccess: () => {
            this.$refs.table.reloadCurrentPage();
          }
        },
        key: order.orderno
      });
    }
  }
}
</script>